<!--日历管理-->
<template>
  <div class="calendar-contaienr">
    <div class="calendar-head">
      <div class="btn-group">
        <el-button type="primary" @click="saveHandle">保存</el-button>
      </div>
    </div>
    <div class="caleandar-content">
      <div v-for="item in 12" :key="item" class="calendar-content-item">
        <div class="item-sub-content">
          <h2 style="width: 28px; margin-top: 24px; font-size: 28px">
            {{ item }}
          </h2>
          <h2 style="width: 28px; font-size: 28px">月</h2>
          <p>{{ monthMap[item - 1] }}</p>
          <p style="letter-spacing: 4px">
            {{ curDate.getFullYear() }}
          </p>
        </div>
        <DCalendar :date="`${curDate.getFullYear()}-${item}`">
          <template #date-cell="{ data }">
            <div
              class="calendar-inner"
              :class="{ 'is-notice': isNotice(data.date) }"
              @click="chooseItem(data)"
            >
              <h4>{{ data.cDay }}</h4>
              <div>
                <span>{{ data.festival || data.lunarFestival }}</span>
              </div>
            </div>
          </template>
        </DCalendar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DCalendar from './components/DCalendar.vue';
import { ElMessage } from 'element-plus';

const monthMap = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

const curDate = new Date();
const noticeList = ref([]);

// 保存
function saveHandle() {
  ElMessage({
    message: `保存成功`,
    type: 'success',
  });
}

function isNotice(date: string) {
  return noticeList.value.some((i) => i.date == date);
}

// 点击日期
async function chooseItem(data: any) {
  const infoIndex = noticeList.value.findIndex((item) => item.date === data.date);
  if (infoIndex !== -1) {
    noticeList.value.splice(infoIndex, 1);
  } else {
    noticeList.value.push({
      date: data.date,
    });
  }
}
onMounted(() => {
  getCalendarList();
});
function getCalendarList() {
  // 获取已保存的日历
}
</script>
<style lang="scss">
.calendar-contaienr {
  display: flex;
  flex-direction: column;
  padding: 10px;
  // background-color: var(--color-white);
  .calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      font-size: 16px;
      font-weight: normal;
    }
  }
}
.caleandar-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: -10px;
  .calendar-content-item {
    display: flex;
    width: 31.9%;
    padding: 10px;
    margin-top: 28px;
    box-sizing: border-box;
    background-color: var(--color-white);
    border-radius: 16px;
    // box-shadow: 0 0 2px #dedede,0 0 4px #dedede;
    .item-sub-content {
      width: 85px;
      min-width: 85px;
      text-align: center;
      color: var(--color-black);
      h2 {
        margin: 0 auto;
      }
    }
    .notice-txt {
      opacity: 0;
      color: #fff;
    }
    .is-notice {
      h4 {
        color: #fff;
        background-color: #eb7967;
        box-sizing: border-box;
      }
      &:hover {
        h4 {
          background-color: #eb7967;
        }
      }
      .notice-txt {
        opacity: 1;
        color: #eb7967;
      }
    }
    .calendar-item:hover {
      .calendar-inner {
        background-color: unset;
      }
    }
  }
}
.dialog-content {
  padding-bottom: 10px;
  .el-button {
    margin-bottom: 8px;
  }
  .todo-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background-color: #fff;
    .el-checkbox {
      margin-right: 10px;
    }
    p {
      white-space: nowrap;
    }
  }
}
</style>
